<template>
    <el-form ref="form"
             :model="model"
             :rules="rules"
             :label-width="labelWidth"
             @submit.prevent.native="onSubmit">
        <slot/>
    </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
    name: 'KForm',
    provide() {
        return {
            KForm: this,
        }
    }
})
export default class KForm extends Vue {
    @Prop({ type: Object }) readonly model!: any;
    @Prop({ type: Object }) readonly rules!: any[];
    @Prop({ type: String }) readonly labelWidth!: string;

    mounted() {
    }

    resetFields() {
        (this.$refs['form'] as any).resetFields();
    }

    clearValidate() {
        (this.$refs['form'] as any).clearValidate();
    }

    onSubmit() {
        (this.$refs.form as any).validate((valid: boolean) => {
            if (valid) {
                this.$emit('submit');
            }
        })
    }
}
</script>
